<template>
  <div>
    <a-modal :title="title" :footer="info.isCustom ? true : false" :visible="visible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="700px" :mask-closable="false">
      <div class="product-detail" v-if="!info.isCustom">
        <div class="top">
          <div class="left">
            <a-image :src="images[imgIndex]" width="100%" height="300px"></a-image>
            <div class="thumb">
              <img @click="imgIndex = index" :class="['item', index == imgIndex ? 'active' : '']" v-for="(url, index) of images" :src="url" />
            </div>
          </div>
          <div class="right">
            <div>
              <span class="label">产品名称：</span>
              <span class="value">{{ skuDetailInfo.skuName ? skuDetailInfo.skuName : '--' }}</span>
            </div>
            <div>
              <span class="label">产品类目：</span>
              <span class="value">{{ $extract(skuDetailInfo, 'category.name') || '--' }}</span>
            </div>
            <div>
              <span class="label">SKU：</span>
              <span class="value">{{ skuDetailInfo.sku ? skuDetailInfo.sku : '--' }}</span>
            </div>
            <div>
              <span class="label">SPU：</span>
              <span class="value">{{ skuDetailInfo.spu ? skuDetailInfo.spu : '--' }}</span>
            </div>
            <div>
              <span class="label">品牌：</span>
              <span class="value">{{ $extract(skuDetailInfo, 'brand.name') || '--' }}</span>
            </div>
            <div>
              <span class="label">主开发：</span>
              <span class="value">{{ $extract(skuDetailInfo, 'developer.name') || '--' }}</span>
            </div>
            <div>
              <span class="label">销售：</span>
              <span class="value">{{ filterSales() }}</span>
            </div>
          </div>
        </div>
        <div class="bottom">
          <p style="margin: 5px 0">属性资料</p>
          <div class="property-con">
            <div class="pro-item" v-for="(item, index) of skuDetailInfo.propList">
              <span class="title">{{ item.name }}</span>
              <span :class="['value', skuDetailInfo.propList % 2 != 0 && index == skuDetailInfo.propList.length - 1 ? 'br' : '']">{{ getPropValue(item) }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="custom-detail" v-else>
        <div class="clearfix">
          <div class="title fl">{{ info.platformOrderNumber }}</div>
          <div class="title fr">
            <a style="margin: 10px 0" class="highlight" :href="info.customUrl">下载定制包</a>
          </div>
        </div>
        <!-- <div class="sub-id">OD2306061</div> -->
        <div class="info">
          <div class="img">
            <ImgPopover :src="getImage(info)">
              <template #con>
                <a-image :preview="false" width="60" height="60" fit="contain" :src="getImage(info)" />
              </template>
            </ImgPopover>
          </div>
          <div class="detail">
            <div class="top">
              <span>MSKU：{{ info.msku }}</span>
              <span>SKU：{{ info.productSku }}</span>
            </div>
            <div class="bottom">
              <span>ASIN：{{ info.asin }}</span>
              <span>销售员：{{ info.salerName }}</span></div
            >
          </div>
        </div>

        <a-tabs v-model:active-key="currentPage">
          <a-tab-pane key="1" title="定制信息">
            <div class="clearfix">
              <p class="fl">定制内容</p>
              <p class="fl ml10 highlight" style="margin-left: 30px; cursor: pointer; user-select: none">一键解析定制信息</p>
            </div>
            <div style="width: 100%; height: 200px; margin: 10px 0">
              <a-textarea style="height: 200px" auto-size placeholder="请输入" allow-clear />
            </div>

            <p style="margin: 10px 0">定制图</p>
            <!-- <a style="margin: 10px 0" class="highlight" :href="info.customUrl">下载定制包</a> -->
            <Upload v-model="imgList" style="margin-top: 10px" />
          </a-tab-pane>
          <a-tab-pane key="2" title="原始数据">
            <JsonEditorVue style="margin-top: 5px; height: 600px" :readonly="true" v-model="json" />
          </a-tab-pane>
        </a-tabs>
      </div>

      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="bntLoading" @click="addImg">确认</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { productSKUDetail } from '@/api/product'
  import { updateItemCustom } from '@/api/order'
  import Upload from '@/components/uploadImg.vue'
  import JsonEditorVue from 'json-editor-vue3'
  import Item from '@/views/product/productManagement/productList/componetns/item.vue'
  export default defineComponent({
    props: ['info'],
    components: { Upload, JsonEditorVue },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data: any = reactive({
        currentPage: '1',
        json: {},
        imgList: [],
        images: [],
        imgIndex: 0,
        skuDetailInfo: {},
        bntLoading: false,
      })
      const title = computed(() => {
        let text = ''
        props.info.isCustom ? (text = '定制详情') : (text = '产品详情')
        return text
      })
      const open = () => {
        data.imgList = []
        data.json = props.info.customProfile ? JSON.parse(props.info.customProfile) : []
        if (props.info.customPics) {
          let arr = props.info.customPics.split(',')

          arr.forEach((e: any) => {
            let obj: any = {}
            obj.url = e
            data.imgList.push(obj)
          })
        }
        getDetail(props.info.productId || 'test0167b58ef87440a475592368e0a12c9c256')
      }
      const handleCancel = () => {
        data.bntLoading = false
        visible.value = false
      }

      const getDetail = async (id: string) => {
        const res = await productSKUDetail(id)
        data.skuDetailInfo = res?.data
        let arr = data.skuDetailInfo.productPicList
        data.images = arr.map((e: any) => e.url)
      }

      const filterSales = () => {
        let newArr = []
        let arr = data.skuDetailInfo.salerList || []
        newArr = arr.map((e: any) => e.name)
        return newArr.join(',')
      }

      const getPropValue = (item: any) => {
        switch (item.type) {
          case 1:
          case 4:
            return item.valueStr
            break
          case 2:
          case 7:
          case 8:
            return item.valueStrList.join(',')
            break
          case 3:
            return item.valueBoolean ? '是' : '否'
            break
          case 5:
            return item.valueNumber
            break
          case 6:
            return item.valueBigDecimal
            break
        }
      }

      const getImage = (item: any) => {
        if (item.isCustom) {
          let arr = item.customPics ? item.customPics.split(',') : []
          return arr[0] ? arr[0] : item.productPic
        } else {
          return item.productPic
        }
      }

      const addImg = async () => {
        if (!data.imgList[0]) {
          return Message.error('请添加图片')
        }

        let params = [
          {
            customPicList: data.imgList.map((e: any) => e.url),
            orderItemId: props.info.id,
          },
        ]
        data.bntLoading = true
        const res = await updateItemCustom(params)
        if (res) {
          Message.success('添加定制图片成功')
        }
        data.bntLoading = false
        emit('save')
        visible.value = false
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleCancel,
        title,
        filterSales,
        getPropValue,
        getImage,
        addImg,
      }
    },
  })
</script>

<style lang="less" scoped>
  .custom-detail {
    .title {
      font-size: 14px;
      font-weight: 700;
    }
    .sub-id {
      font-size: 12px;
      color: #8e8e8e;
    }
    .info {
      height: 60px;
      display: flex;
      .img {
      }
      .detail {
        margin-left: 10px;
        span {
          display: inline-block;
          width: 200px;
          font-size: 12px;
        }
        .bottom {
          margin-top: 5px;
        }
      }
    }
  }

  .br {
    padding-right: 1px;
    border-right: 1px solid #8e8e8e;
  }

  .product-detail {
    .top {
      display: flex;
      .left {
        width: 300px;
        height: 350px;
        .thumb {
          width: 100%;
          height: 50px;
          text-align: center;
          .item {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin: 5px 5px 0 0;
          }

          .active {
            border: 2px solid rgb(var(--primary-6));
          }
        }
      }

      .right {
        // margin-top: 20px;
        margin-left: 20px;
        div {
          margin-bottom: 25px;
        }
        span {
          display: inline-block;
        }
        .label {
          width: 80px;
          text-align: right;
        }
        .value {
        }
      }
    }
    .bottom {
      border-top: 1px dashed #8e8e8e;
      .property-con {
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid #8e8e8e;
        // border-left: none;
        // border-bottom: none;
        .pro-item {
          width: 50%;
          height: 30px;
          display: flex;

          &:nth-child(2n) {
            border-right: 1px solid #8e8e8e;
          }

          .title {
            width: 120px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-left: 1px solid #8e8e8e;
            border-bottom: 1px solid #8e8e8e;
          }

          .value {
            flex: 1;
            height: 30px;
            line-height: 30px;
            border-left: 1px solid #8e8e8e;
            border-bottom: 1px solid #8e8e8e;
          }
        }
      }
    }
  }
</style>
